<template>
  <div class="departments-container">
    <!-- 提供了一些默认的内边距 padding -->
    <div class="app-container">
      <!--
        el-card 组件 卡片 盒子(圆角+阴影)
        布局组件
        默认是 float 布局  宽度百分比实现
        el-row 表示一行
        el-col 一列 (默认占了24份)  :span="24"
       -->
      <!-- <el-card>
        <el-row>
          <el-col :span="8" style="background:pink">111</el-col>
          <el-col :span="8" style="background:red">222</el-col>
          <el-col :span="8" style="background:blue">222</el-col>
          <el-col :span="8" style="background:orange">222</el-col>
        </el-row>
      </el-card> -->
      <el-card v-loading="loading" class="tree-card">
        <!-- 用了一个行列布局 -->
        <TreeTools :node-data="company" :root="true" @add-depts="addDeptsFn" />

        <!--
          el-tree 树形结构
          data  树形数据
          props 调整将来获取文字信息以及子节点的字段名称
          default-expand-all 默认展开所有子节点
         -->
        <!--
          el-tree 组件内部:
         <slot name="default" :data="xxx"></slot>

         { data: xxx }
        -->

        <el-tree :data="departs" :props="defaultProps" default-expand-all>
          <template #default="{ data }">
            <!-- el-tree组件内部:  <slot name="default" :data="xxxx"> -->
            <!--
              node data el-tree组件内部给你提供的
              node: 偏底层一点的节点信息
              data: 这个就是我们之前提供给el-tree的数据
             -->
            <!-- <div>
              <p>{{ data.manager }}</p>
            </div> -->
            <!-- <p>{{ data.name }}</p> -->
            <!-- el-row 小注意点: 将来默认是由内容撑开,  -->
            <TreeTools
              :node-data="data"
              @del-depts="getDepartments"
              @add-depts="addDeptsFn"
              @edit-depts="editDeptsFn"
            />
          </template>
        </el-tree>

        <!-- 对于布尔类型的属性 只要你给他加了, 就位true -->

        <!-- 组件内部如果没有内容的话, 将来默认会变成闭合单标签 -->
        <!-- <el-tree />
        <el-tree /> -->

        <!--
          插槽: 组件定义时 挖了一个坑 slot
          分类: 默认插槽default  具名插槽xxx  作用域插槽(为了拿到插槽内部的值)
          目的: 为了将来你的组件结构有一部分不写死

          <div><slot data="1"></slot></div>
         -->
      </el-card>

      <!-- AddDepts组件始终都在, 只不过隐藏了 -->
      <!-- 1.  :show-dialog.sync="isShow" 这里就是在释放show-dialog的控制权 -->
      <AddDepts
        ref="addDept"
        :dept-list="deptList"
        :node-data="nodeData"
        :show-dialog.sync="isShow"
        @add-depts="getDepartments"
      />
    </div>
  </div>
</template>

<script>
import { reqGetDepartments } from '@/api/departments'
import TreeTools from './components/TreeTools'
import AddDepts from './components/AddDepts.vue'
// import { transListToTree } from '@/utils'
function tranListToTreeData(list, rootValue) {
  const arr = []
  list.forEach((item) => {
    if (item.pid === rootValue) {
      // 以 item.id 作为 父 id, 接着往下找
      const children = tranListToTreeData(list, item.id)
      if (children.length > 0) {
        item.children = children
      }
      // 将item项, 追加到arr数组中
      arr.push(item)
    }
  })
  return arr
}
export default {
  name: 'Departments',
  components: {
    TreeTools,
    AddDepts
  },
  data() {
    // list 一定是个数组, 一定是放了很多对象, 一个对象就是一个节点
    // label 将来这个节点的文字描述信息
    // children 孩子们
    return {
      // 部门列表(树形数据)
      departs: [],
      // 部门列表(列表型 ->  便于查找)
      deptList: [],
      defaultProps: {
        // 这里labe指的是 将来文字描述 读取哪个字段
        label: 'name',
        children: 'children'
      },
      company: { name: '江苏传智播客教育科技股份有限公司', manager: '负责人' },
      isShow: false,
      // 存储正在操作的那个部门
      nodeData: {},
      loading: false
    }
  },
  created() {
    this.getDepartments()
  },
  methods: {
    // 获取部门列表数据 处理以后进行渲染
    async getDepartments() {
      this.loading = true
      // 需求: 希望两秒以后再去发请求 获取部门列表
      // 等一个异步 结束以后, 再做某件事 => promise

      // 将来在这里会等两秒以后, 再去做下面的事
      // await new Promise((resolve, reject) => {
      //   setTimeout(() => {
      //     resolve()
      //   }, 2000)
      // })

      const {
        data: { depts, companyName }
      } = await reqGetDepartments()
      console.log(depts)
      this.deptList = depts
      // 一级部门列表 pid===''
      this.company.name = companyName

      // 纯粹是为了添加id  配合后面的校验
      this.company.id = ''

      // debugger
      // 列表数据 => 树形数据(children)
      const result = tranListToTreeData(depts, '')
      console.log(result)
      this.departs = result

      this.loading = false
    },
    // closeDialogFn(flag) {
    //   this.isShow = flag
    // },
    addDeptsFn(nodeData) {
      this.isShow = true
      console.log('要新增的部门是', nodeData)
      // nodeData 将来是用来给他新增子部门
      this.nodeData = nodeData

      // ref获取dom / 组件  调用组件对应的方法了
      // this.$refs.form.validate
      // 需求是 对话框显示的时候 才去发请求
      // this.$refs.addDept.getSimpleUserList()

      // this.$nextTick(() => {
      //   this.$refs.addDept.dialogTitle = '添加子部门'
      // })
    },
    editDeptsFn(nodeData) {
      // vue的dom更新是同步的 => 异步
      // => 真的希望在对话框显示在页面以后(dom更新以后)  再做某件事
      this.isShow = true
      // nodeData 这个nodeData 用来修改自己信息
      this.nodeData = nodeData

      this.$nextTick(() => {
        // dom更新之后才会触发
        // this.$refs.addDept => 获取子组件 => 你可以调用组件内部的方法/属性数据
        // this.$refs.addDept.dialogTitle = '编辑部门'

        this.$refs.addDept.getDepartDetail()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
// scoped 样式只在当前组件内部生效
// scoped 原理 :
// 会将组件内所有标签统一添加一个属性 data-v-e735600c 然后 会在所有css选择器身上加一个属性选择器

// scoped 小问题:
// 不会给组件内部使用的子组件添加这个属性

// 将来你会有一个需求: 你希望在你的样式中去修改子组件的样式 => 改不上 => ::v-deep 样式穿透 scss
// less /deep/

// 结论:
// 将来如果你需要样式只作用在你的组件  => scoped
// 你的结构里 如果有子组件 => 作用不上 => 深度作用选择器

//  ::v-deep  /deep/ 深度作用选择器
// .app-container {
//   background-color: #8df;
// }
.el-tree {
  ::v-deep {
    // 小三角的样式, 去掉默认的小三角的旋转效果
    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    // 有子节点 且未展开 +
    .el-icon-caret-right:before {
      background: url("~@/assets/common/add-circle.png") no-repeat 0 0;
      content: "";
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 有子节点 且已展开 -
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
      background: url("~@/assets/common/minus-circle.png") no-repeat 0 0;
      content: "";
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 没有子节点 将来没有children
    .el-tree-node__expand-icon.is-leaf::before {
      background: url("~@/assets/common/user-filling.png") no-repeat 0 0;
      content: "";
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
  }
}
</style>
